<template>
  <van-row class="login-container">
    <van-icon @click="routerBack" class="login-back" name="arrow-left" size="20"/>
    <van-row class="form-title">{{isLoginOrRegister?loginFormTitle:registerFormTitle}}</van-row>
    <!-- login -->
    <van-form class="login-form" v-if="isLoginOrRegister"  validate-first @submit="onLoginSubmit" @failed="onLoginFailed">
      <van-field
        class="phone"
        v-model="phone"
        name="phone"
        placeholder="请输入手机号"
        :rules="phoneRules" />
      <van-row class="code">
        <van-field
        v-model="code"
        name="code"
        placeholder="验证码"
        :rules="codeRules" />
        <van-button class="code-sumbit" size="small" round block :disabled="!phone.length">
          发送验证码
        </van-button>
      </van-row>
      <van-button class="login-sumbit" ref="loginSumbit" round block type="info" native-type="submit" :disabled="(!phone.length&&!code.length)">
        马上登录
      </van-button>
      <van-row class="agreement">
        <span>登录代表你已同意 </span>
        <span @click.self="onAgreement" class="agreement-btn">Yi mei 用户隐私协议</span>
      </van-row>
      <van-row class="to-register" @click="toRegister">去注册</van-row>
    </van-form>
    <!-- registerForm -->
    <van-form v-else class="login-form register-form" validate-first @submit="onRegisterSubmit" @failed="onRegisterFailed">
      <van-field
        class="phone"
        v-model="phone"
        name="phone"
        placeholder="请输入手机号"
        :rules="phoneRules" />
      <van-row class="code">
        <van-field
          v-model="code"
          name="code"
          placeholder="验证码"
          :rules="codeRules" />
        <van-button tag="span" class="code-sumbit" size="small"
          round block :disabled="!phone.length" @click.stop="getCode">
          获取验证码
        </van-button>
      </van-row>
      <van-button class="login-sumbit" ref="loginSumbit" round block type="info" native-type="submit" :disabled="!code.length">
        注册登录
      </van-button>
    </van-form>
    <!-- 第三方登录入口 -->
    <van-row v-if="isLoginOrRegister&&thirdEntersData&&thirdEntersData.length>0" class="third-enter-box">
      <p class="enter-title">第三方登录</p>
      <van-row 
        class="third-enter"
      >
        <van-col class="enter-item" v-for="(enterItem, index) in thirdEntersData" :key="index" @click.stop="onThirdsLoginAuth(enterItem)" >
          <img :src="enterItem.icon" alt="" style="width: 50px; height: 50px;">
          <span>{{enterItem.name}}</span>
        </van-col>
      </van-row>
    </van-row>
    <!-- 登录 隐私协议组件 -->
    <van-row v-if="loginFormTitle">
      <van-popup v-model="isShowAgreement"
        closeable
        position="center"
        style="width: 100%; height: 86%">
        <com-agreement/>
      </van-popup>
    </van-row>
  </van-row>
</template>

<script>
import comAgreement from '../../components/comAgreement'
import qqIcon from '../../assets/images/third-enter/qq.png'
import wechatIcon from '../../assets/images/third-enter/wechat.png'
import weboIcon from '../../assets/images/third-enter/webo.png'

export default {
  components: {
    comAgreement
  },
  data() {
    this.phoneRules = [
      { required: true, message: '请输入手机号' },
      { validator: this.phoneValidator, message: '手机号格式错误' },
    ];
    this.codeRules = [
      { required: true, message: '请输入验证码' },
      { validator: this.codeValidator, message: '验证码错误' },
    ];
    return {
      thirdEntersData: [ // 第三方登录
        {
          icon: qqIcon,
          name: 'QQ',
          id: 1
        },
        {
          icon: wechatIcon,
          name: '微信',
          id: 2
        },
        {
          icon: weboIcon,
          name: '微博',
          id: 3
        }
      ],
      isShowAgreement: false,
      isLoginOrRegister: true,
      canSumbit: false,
      sumbitBtnDisable: false,
      code: '',
      phone: '',
      currentServerCode: '',
      loginFormTitle: '欢迎登录 Yi mi ',
      registerFormTitle: '快速注册  Yi mi '
    }
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    phoneValidator(val) {
      return /1\d{10}/.test(val);
    },
    // TODO 接入验证码服务请求获取短信验证码
    getCode() {
      console.log('请求获取短信验证码')
      setTimeout(()=>{
        this.currentServerCode = 1234
        this.$toast(this.currentServerCode)
      }, 1000)
    },
    // 校验函数返回 Promise 来实现异步校验
    codeValidator(val) {
      console.log(val)
      return new Promise(resolve => {
        this.$toast.loading('验证中...')
        setTimeout(() => {
          this.$toast.clear()
          resolve(/\d{4}/.test(val))
        }, 1000)
      })
    },
    onLoginSubmit(values) {
      this.$toast('登录')
      console.log('submit', values)
    },
    onLoginFailed(errorInfo) {
      this.$toast('登录失败')
      console.log('failed', errorInfo)
    },
    onRegisterSubmit(values) {
      this.$toast('注册')
      console.log('4')
      console.log('submit', values)
    },
    onRegisterFailed(errorInfo) {
      this.$toast('注册异常')
      console.log('5')
      console.log('failed', errorInfo)
    },
    // 查看用户隐私协议
    onAgreement() {
      this.isShowAgreement = !this.isShowAgreement
    },
    // 切换到注册
    toRegister() {
      this.isLoginOrRegister = false
    },
    // 第三方登录授权入口
    // 对接不同类型的授权处理
    onThirdsLoginAuth(params) {
      this.$toast(params.name)
      if (!params && !params.id) {
        return
      }
      switch (params.id) {
        case 1:
          break
        case 2:
          break
        case 3:
          break
      }
    },
    routerBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/style/global.scss";

.login-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .login-back {
    padding-top: 32px;
    padding-left: 16px;
  }
  .form-title {
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    text-indent: 24px;
    padding-top: 48px;
  }
  .login-form {
    margin: 60px 10px 0 10px;
    .code {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      margin: 10px auto;
      .code-sumbit {
        width: 120px;
        color: #000;
      }
    }
    .login-sumbit {
      width: calc(100% - 16px);
      margin: 24px 0 0 16px  !important;
      @include btn;
    }
    /deep/.van-button--disabled {
      background: rgb(187, 187, 187) !important;
      border: none;
    }
    .agreement {
      margin-top: 8px;
      margin-left: 16px;
      font-size: 12px;
      .agreement-btn {
        border: none;
        font-size: 12px;
        color: red;
        text-decoration: underline;
      }
    }
    .to-register {
      width: 100%;
      text-align: right;
      padding-right: 14px;
      box-sizing: border-box;
      text-decoration: underline;
    }
  }
  .third-enter-box {
    margin-top: 60px;
    .enter-title {
      font-size: 14px;
      color: #777;
      text-align: right;
      padding-right: 20px;
      box-sizing: border-box;
      text-decoration: underline;
    }
    .third-enter {
      width: 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .enter-item {
        width: 33.3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
